<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础信息-VisPackStreamV</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>

<body>
    <div class="navbar">
        <div class="logo">
            <i class="fas fa-stream"></i> VisPackStream
        </div>
        <div class="nav-links">
            <a href="index.html" class="active">
                <i class="fas fa-home"></i>
                <span>基础信息</span>
            </a>
            <a href="config.html">
                <i class="fas fa-cog"></i>
                <span>系统配置</span>
            </a>
            <a href="logs.html">
                <i class="fas fa-file-alt"></i>
                <span>系统日志</span>
            </a>
            <a href="/logout" style="margin-top: auto;">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </div>
    </div>

    <div class="container">
        <div class="grid">
            <!-- 系统信息卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle"></i> 系统信息
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <strong>设备 IP:</strong>
                        <span id="ip">加载中...</span>
                        <button class="copy-btn" onclick="copyText('ip')">
                            <i class="fas fa-copy"></i> 复制
                        </button>
                    </div>

                    <div class="info-row">
                        <strong>监听地址:</strong>
                        <span id="listen">加载中...</span>
                        <button class="copy-btn" onclick="copyText('listen')">
                            <i class="fas fa-copy"></i> 复制
                        </button>
                    </div>

                    <div class="info-row">
                        <strong>推送地址:</strong>
                        <span id="target">加载中...</span>
                    </div>

                    <!-- 添加版本信息 -->
                    <div class="info-row">
                        <strong>系统版本:</strong>
                        <span id="version">加载中...</span>
                    </div>
                </div>
            </div>

            <!-- 系统占用卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-microchip"></i> 系统占用
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <div class="chart">
                            <svg width="120" height="120">
                                <circle class="bg" cx="60" cy="60" r="50" />
                                <circle class="value" id="cpu-circle" cx="60" cy="60" r="50" stroke-dasharray="0 314" />
                            </svg>
                            <div class="chart-text" id="cpu-text">--%</div>
                            <p style="text-align:center;">CPU</p>
                        </div>
                        <div class="chart">
                            <svg width="120" height="120">
                                <circle class="bg" cx="60" cy="60" r="50" />
                                <circle class="value" id="mem-circle" cx="60" cy="60" r="50" stroke-dasharray="0 314" />
                            </svg>
                            <div class="chart-text" id="mem-text">--%</div>
                            <p style="text-align:center;">内存</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 接收信息卡片 -->
        <div class="card alarm-card">
            <div class="card-header">
                <i class="fas fa-bell"></i> 推送信息
            </div>
            <div class="card-body">
                <div class="grid1">
                    <div class="alarm-image">
                        <img id="alarm-img" alt="抓拍图片" src="./nopig.png" height="200px" width="250px">
                    </div>
                    <div class="alarm-info">
                        <div class="info-row">
                            <strong>告警类型:</strong>
                            <span id="alert_alarm">无</span>
                        </div>
                        <div class="info-row">
                            <strong>目标类型:</strong>
                            <span id="targetType">无</span>
                        </div>
                        <div class="info-row">
                            <strong>区域ID:</strong>
                            <span id="areaIds">无</span>
                        </div>
                        <div class="info-row">
                            <strong>时间:</strong>
                            <span id="Time">无</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 这里可以添加JavaScript代码来动态加载系统信息、CPU/内存占用和日志
            function copyText(elementId) {
                const text = document.getElementById(elementId).innerText;
                navigator.clipboard.writeText(text).then(() => {
                    alert('已复制到剪贴板');
                }).catch(err => {
                    console.error('复制失败:', err);
                });
            }

            fetch("/system-info")
                .then(res => res.json())
                .then(data => {
                    document.getElementById("ip").textContent = data.ip;
                    document.getElementById("listen").textContent = `http://${data.ip}:${data.port}${data.path}`;
                    document.getElementById("target").textContent = data.targetUrl;
                    // 显示版本信息
                    document.getElementById("version").textContent = data.version || "未知版本";


                    // CPU 环图
                    if (data.cpu) {
                        const cpuPercent = parseFloat(data.cpu);
                        const cpuDash = (cpuPercent / 100 * 314).toFixed(1);
                        document.getElementById("cpu-circle").setAttribute("stroke-dasharray", `${cpuDash} 314`);
                        document.getElementById("cpu-text").textContent = `${cpuPercent}%`;
                    }

                    // 内存环图
                    if (data.memory && data.memory.total && data.memory.free) {
                        const memUsed = ((data.memory.total - data.memory.free) / data.memory.total * 100).toFixed(1);
                        const memDash = (memUsed / 100 * 314).toFixed(1);
                        document.getElementById("mem-circle").setAttribute("stroke-dasharray", `${memDash} 314`);
                        document.getElementById("mem-text").textContent = `${memUsed}%`;
                    } else {
                        document.getElementById("mem-text").textContent = `--`;
                    }
                });

            // 接收信息卡片
            function fetchAlarmData() {
                fetch("/alarm-log")
                    .then(res => res.json())
                    .then(data => {
                        // 从data.data中获取告警信息
                        document.getElementById("alert_alarm").textContent = data.data?.alarmType || "无";
                        document.getElementById("targetType").textContent = data.data?.targetType || "无";
                        document.getElementById("areaIds").textContent = data.data?.areaIds || "无";
                        document.getElementById("Time").textContent = data.data?.time || "无";
                        // 加载图片
                        document.getElementById("alarm-img").src = data.img
                    })
                    .catch(err => {
                        console.error("获取告警数据失败", err);
                    });
            }



            // 初始加载
            fetchAlarmData();

            // 设置定时器，每5秒刷新一次数据
            setInterval(fetchAlarmData, 5000);

            fetch("/system-info")
                .then(res => {
                    if (res.status === 401) {
                        window.location.href = "/login.html";
                        return;
                    }
                    return res.json();
                })
                .then(data => {
                    // 处理数据
                })
                .catch(err => {
                    console.error("请求失败", err);
                })
        </script>
</body>

</html>